<template>
    <div v-loading="loadingData" class="userTable">
        <div style="margin-bottom:10px;">
            <el-row>
                <el-col :span="12">
                    <el-input v-model.trim = "searchCondition" size="medium"
                        placeholder="请输入搜索内容" auto-complete="off" clearable>
                    </el-input>    
                </el-col>   
                <el-col :span="6" :offset="1">
                    <el-button type="primary" size="medium" @click="onQuery()">查询</el-button>
                </el-col>  
            </el-row>     
        </div>
        <el-table :data="tableData" border  style="width: 100%" 
            :header-cell-class-name="headerCellClassName"
            :row-class-name="tableRowClassName">
            <el-table-column fixed  prop="orderId"  label="订单号"  width="200"></el-table-column>
            <el-table-column prop="paidan"   label="派单"  width="150"></el-table-column>
            <el-table-column prop="jiedan"  label="接单" width="150"></el-table-column>
            <el-table-column prop="dataTime"  label="时间" width="200"></el-table-column>
            <el-table-column prop="fuwu" label="服务"  width="150"></el-table-column>
            <el-table-column label="描述" width="200">
                <template slot-scope="scope">
                    <span class="table-slice">{{scope.row.miaoshu.slice(0,15)}}...<a class="chakanxq" href="#">查看详情</a></span>
                </template>
            </el-table-column>
            <el-table-column prop="guanli" label="管理" width="150"></el-table-column>
            <el-table-column prop="zt" label="状态" width="150"></el-table-column>
            <el-table-column prop="leibie" label="类别" 
                :filters="[{text: '正常', value: '正常'}, {text: '异常', value: '异常'}]"
                :filter-method="filterTag"
                filter-placement="bottom-end"
                width="150">
            </el-table-column>
            <el-table-column prop="jieguo" label="处理结果" width="150"></el-table-column>
            <el-table-column label="操作"  width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small">处理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页开始-->
        <div class="block">
        <span class="pageFreshFoot"><el-button type="text" class="xin" @click="xin()">刷新</el-button></span>
        <div class="pageComponentFoot">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="cpage"
                :page-sizes="[10,20,30,40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
        <div style="clear:both"></div>
        </div>
        <!--分页结束-->
    </div>
</template>

<script>
    import '@/mock/user.js';

    export default {
        data() {
            return {  
                tableData: [
                    {
                        orderId:'1111111',
                        paidan:'高晨',
                        jiedan:'张三',
                        dataTime:'2018-08-20 17:00:00',
                        fuwu:'王者',
                        miaoshu:'我是描述我是描述我是描述我是描述我是描述我是描述',
                        guanli:'江小鱼',
                        zt:'已归档',
                        leibie:'异常',
                        jieguo:'系统补偿5元'
                    }
                ],            
                multipleSelection: [],       
                select_word: '',
                loadingData: false,
                pageNumber: 1,
                searchCondition: '',
                totalPage:10,           //  总页数
                cpage:1,                //  当前页
                pagesize:10,            //  每页显示数
                totalCount:100,         //  总条数
            }
        },
        created(){         
        },
        mounted() {  
            
        },
        methods: {
            // 设置header颜色
            headerCellClassName({row, rowIndex}){
                return 'header-row';
            },
            // 设置内容行的颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'even-row';
                }   
                return '';
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleClick(row) {
                console.log(row);
            },
            // 查询
            onQuery(){

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style>
    .el-table .even-row {
        background:#F2F3F7;
    }
    .el-table .header-row{
        background: #D5E7F3;    
    }
    .userTable .cell {    
        text-align: center;
    }
    .userTable .el-table--border td {
        border-right: none
    }
    .handle-box{
        margin-bottom: 20px;
    }
    .handle-select{
        width: 120px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
</style>